<template>
    <!-- 表单输入绑定 input,vue的原生指令，可直接foucs -->
    <!-- <input id = 'input' v-model="text"> -->
    <input v-if="showInput" v-focus v-model="text">
    <!-- ui库中 输入框 Input；绑定值 v-model；@keyup.enter="submit" 是vue中按键修饰符，调用submit函数-->
    <a-input  :style="{width:'320px'}" placeholder="Please enter something" 
        v-model="testdata" @keyup.enter="submit" allow-clear />
    <a-input :style="{width:'320px'}" default-value="content" 
        placeholder="Please enter something" allow-clear />
    <div id = 'sync_test'>
        <!-- {{ testdata }} -->
        <!-- {{ list.course }} -->
        <li v-for="(xyz, index) in list.course" :key="xyz">{{ xyz }}-{{ index }}</li>
    </div>
    <a-switch v-model="ibg" type="round"/>
    <!-- 新加一行 -->
    <!-- Class 绑定; 第一行是绑定死的，第二行是响应式绑定 -->
    <!-- <div :id="testdata" style="height: 200;width: 200;" :class="{bg:true}"> -->
    <!-- <div :id="testdata" style="height: 200;width: 200;" :class="{bg:ibg}">   
        {{ testdata1 }}
    </div>
     -->
     <!-- style 绑定 -->
     <div :id="testdata" :style="testdatastyle">   
        {{ testdata1 }}
    </div>
    <div>
        <a-input  :style="{height:'30px',width:'100px'}" placeholder="Please enter something" 
        v-model="testdatastyle.width" allow-clear />
     </div>
</template>

<script setup>
import { watch,computed } from 'vue';
import { onMounted,ref,nextTick } from 'vue';

const testdata = ref('Test')
// 计算属性 computed
const testdata1 = computed({
  // getter
  get() {
    return testdata.value + '.test'
  },
  // setter
//   set(newValue) {
//     name.value = newValue.split(' ').reverse().join('')
//   }
})
const list = ref({
    course: []
})
// 把输入框中的值，追加到list中
const submit = () => { 
    // 因为list是一个对象，所以要list.value.course
    list.value.course.push(testdata.value)
    // 追加后的值，在输入框中清空
    testdata.value = ''
}
const ibg = ref(false)
const testdatastyle = ref({
    height:'30px',
    width:'20px',
    // 遇到background-color转换为驼峰
    backgroundColor: 'red',
})
const text = ref("初始值")
const showInput=ref(true)


// 侦听器(watch)
// watch的对象是响应式的字符串
// newValue, oldValue是固定参数
watch(testdata, (newValue,oldValue) => {
    console.log(newValue)
    console.log(oldValue)
})
// watch的对象是响应式的对象
watch(list,(newValue,oldValue) => {
    console.log(newValue)
    console.log(oldValue)
},{deep:true})
const vFocus = {
  mounted: (el) => el.focus()
}

// const input = ref(null)
// DOM异步更新
onMounted (() =>{
    testdata.value = 'xiaowei'
    // 这里的innerText是异步更新;此时页面还是显示Test,而不是xiaowei
    console.log(document.getElementById('sync_test').innerText)
    // 等触发了下次更新后来执行你的代码
    nextTick(() => {
        console.log(document.getElementById('sync_test').innerText) 
    })
    // 原生focus用法
    // const input = document.getElementById("input")
    // input.focus()
    // ui库中focus用法
    // input.value.focus()

})

// // vue实例的声明周期：

// // 虚拟Dom已经生成好了, 等待被挂载
// // onBeforeMount是一个钩子
// onBeforeMount(() => {
//     console.log('onBeforeMount')
// })
// // 虚拟Dom 已经挂载，被渲染成真实的dom, 用户可以看见了
// // document.get(xx).xxx
// onMounted(() => {
//     console.log('onMounted')
// })

// // 界面被重新选择之前
// onBeforeUpdate(() => {
//     console.log('onBeforeUpdate')
// })
// // 界面从新被渲染之后
// onUpdated(() => {
//     console.log('onUpdated')
// })

// // 切换了页面组件被销毁
// onBeforeUnmount(() => {
//     console.log('onBeforeUnmount')
// })
// onUnmounted(() => {
//     console.log('onUnmounted')
// })    
</script>

<style lang="css" scoped>
/* id 和 class 选择器: #id , .class */
.bg {
    background-color: blueviolet;
}
</style>
